<%--
  Created by IntelliJ IDEA.
  User: Tolean
  Date: 2018/6/1
  Time: 23:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<head>
    <!--- basic page needs
    ================================================== -->
    <meta charset="utf-8">
    <title>LYON</title>
    <%@include file="common/head.jspf"%>
    <link rel="Shortcut Icon" href="${lyon}/static/images/favicon.ico"  />
    <!-- mobile specific metas
    ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- CSS
  ================================================== -->
    <link rel="stylesheet" href="${lyon}/static/assets/css/base.css">
    <link rel="stylesheet" href="${lyon}/static/assets/css/vendor.css">
    <link rel="stylesheet" href="${lyon}/static/assets/css/quotations.css">
    <!-- script
    ================================================== -->
    <script src="${lyon}/static/assets/js/modernizr.js"></script>
    <script src="${lyon}/static/assets/js/pace.min.js"></script>
    <script src="${lyon}/interface/admin/common/layui/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${lyon}/static/assets/js/jquery.min.js"></script>
    <!-- favicons
     ================================================== -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <!--[if lte IE 8]><script src="${lyon}/static/assets/js/ie/html5shiv.js"></script><![endif]-->
    <!--[if lte IE 9]><link rel="stylesheet" href="${lyon}/static/assets/css/ie9.css" /><![endif]-->
    <!--[if lte IE 8]><link rel="stylesheet" href="${lyon}/static/assets/css/ie8.css" /><![endif]-->
</head>

<body id="top">
<!-- header
   ================================================== -->
<%@include file="common/header.jsp"%>
<!-- masonry
================================================== -->
<section id="bricks">

    <div class="row masonry">

        <!-- brick-wrapper -->
        <div class="bricks-wrapper">

            <div class="grid-sizer"></div>

            <div class="brick entry featured-grid animate-this">
                <div class="entry-content">
                    <div id="featured-post-slider" class="flexslider">
                        <ul class="slides">
                            <li>
                                <div class="featured-post-slide">

                                    <div class="post-background" style="background-image:url('${lyon}/static/images/quotations/_0.jpg');"></div>

                                    <div class="overlay"></div>

                                    <%--<div class="post-content">--%>
                                        <%--<ul class="entry-meta">--%>
                                            <%--<li>September 06, 2016</li>--%>
                                            <%--<li><a href="#" >Naruto Uzumaki</a></li>--%>
                                        <%--</ul>--%>
                                        <%--<h1 class="slide-title"><a href="single-standard.html" title="">Minimalism Never Goes Out of Style</a></h1>--%>
                                    <%--</div>--%>

                                </div>
                            </li> <!-- /slide -->

                            <li>
                                <div class="featured-post-slide">

                                    <div class="post-background" style="background-image:url('${lyon}/static/images/quotations/_1.jpg');"></div>

                                    <div class="overlay"></div>

                                </div>
                            </li> <!-- /slide -->

                            <li>
                                <div class="featured-post-slide">

                                    <div class="post-background" style="background-image:url('${lyon}/static/images/quotations/_2.jpg')"></div>

                                    <div class="overlay"></div>

                                </div>
                            </li> <!-- end slide -->
                        </ul> <!-- end slides -->
                    </div> <!-- end featured-post-slider -->
                </div> <!-- end entry content -->
            </div>
            <c:forEach items="${quotations}" var="i">
                <article class="brick entry animate-this">
                    <c:if test="${img}">
                        <div class="entry-thumb">
                            <a  class="thumb-link">
                                <img src="${lyono}/static/images/quotations/${i.id % 26}.jpg" alt="Liberty">
                            </a>
                        </div>
                    </c:if>
                    <div class="entry-text">
                        <div class="entry-header">
                            <h1 class="entry-title"><a href="single-standard.html">${i.title}</a></h1>
                        </div>
                        <div class="entry-excerpt">
                            ${i.content}
                        </div>
                    </div>
                </article> <!-- end article -->
            </c:forEach>
        </div> <!-- end brick-wrapper -->

    </div> <!-- end row -->
    <div class="row">

        <nav class="pagination">
                <div id="laypage"/>
        </nav>

    </div>

</section> <!-- end bricks -->
<div id="float_menu">
    <c:choose>
        <c:when test="${img}">
            <a href="${lyon}/onstage/quotations.html?pageNum=${pageInfo.getPageNum()}&pageSize=${pageInfo.getPageSize()}&img=false&down=${down}"><img src="${lyon}/static/images/imgMode.png" ></a>
        </c:when>
        <c:otherwise>
            <a href="${lyon}/onstage/quotations.html?pageNum=${pageInfo.getPageNum()}&pageSize=${pageInfo.getPageSize()}&img=true&down=${down}"><img src="${lyon}/static/images/noImgMode.png" ></a>
        </c:otherwise>
    </c:choose>

    <c:choose>
        <c:when test="${down}">
            <a href="${lyon}/onstage/quotations.html?pageNum=${pageInfo.getPageNum()}&pageSize=${pageInfo.getPageSize()}&img=${img}&down=false"><img src="${lyon}/static/images/down.png" ></a>
        </c:when>
        <c:otherwise>
            <a href="${lyon}/onstage/quotations.html?pageNum=${pageInfo.getPageNum()}&pageSize=${pageInfo.getPageSize()}&img=${img}&down=true"><img src="${lyon}/static/images/up.png" ></a>
        </c:otherwise>
    </c:choose>
</div>
<div id="preloader">
    <div id="loader">

    </div>
</div>
<script>
    layui.use('laypage', function(){
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'laypage' //注意，这里的 test1 是 ID，不用加 # 号
            ,count:  ${pageInfo.getTotal()} //数据总数，从服务端得到
            ,limit: ${pageInfo.getPageSize()}
            ,curr: ${pageInfo.getPageNum()}
            ,jump: function(obj,first) {
                if(!first){
                    location.href='?pageNum='+obj.curr+'&pageSize='+obj.limit;
                }
            }
        });
    });
</script>
<!-- Java Script
================================================== -->
<script src="${lyon}/static/assets/js/jquery.min.js"></script>
<script src="${lyon}/static/assets/js/plugins.js"></script>
<script src="${lyon}/static/assets/js/quotations.js"></script>
<script src="${lyon}/static/assets/js/skel.min.js"></script>
<script src="${lyon}/static/assets/js/util.js"></script>
<script src="${lyon}/static/assets/js/main.js"></script>
</body>

</html>
